<template>
  <router-link to="/user">
    <el-link type="primary" :underline="false"><返回</el-link>
  </router-link>
  <el-form :inline="true" :model="queryForm" class="demo-form-inline">
    <el-form-item label="用户组名:">
      <el-input
        v-model="queryForm.name"
        placeholder="请输入用户组名"
        clearable
        style="width: 200px"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="querySubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <div class="table-header">
    <span class="table-title">用户组列表</span>
    <el-button type="primary" @click="addGroupDialog()">加入用户组</el-button>
  </div>
  <el-table :data="tableData">
    <el-table-column prop="name" label="用户组名" />
    <el-table-column prop="desc" label="描述" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button link type="danger" size="small" @click="fetchUbindGroup(row.id)">退出</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="pagination-container">
    <el-pagination
      v-if="page.total > 0"
      v-model:current-page="pageNumber"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      :size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <el-dialog v-model="addGroupDialogSelect" width="35%" title="加入用户组">
    <el-select v-model="bindGroupId" multiple clearable placeholder="请选择用户组">
      <el-option
        v-for="item in optionsGroupList"
        :key="item.id"
        :label="`${item.name}`"
        :value="item.id"
      />
    </el-select>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addGroupDialogSelect = false">取消</el-button>
        <el-button type="primary" @click="bindGroupSubmit()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
    
    <script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import { listGroup } from '@/api/group'
import { listUserBindGroup, userBindGroup } from '@/api/user'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'

const route = useRoute()
const formLabelWidth = '140px'
const page = reactive({ total: 0 })
const pageSize = ref(10)
const pageNumber = ref(1)
const addGroupDialogSelect = ref(false)
const curUserId = route.params.id

const initAddGroupForm = reactive({
  name: '',
  desc: ''
  // 添加其他字段
})

const queryForm = reactive({ ...initAddGroupForm })

const tableData = ref([])
const bindGroupId = ref()
const optionsGroupList = ref([])
const addGroupDialog = async () => {
  addGroupDialogSelect.value = true //显示弹窗
  bindGroupId.value = null //重置上一次的选择
  try {
    const resp = await listGroup({ page: 1, size: 100 })
    if (resp.status < 300) {
      optionsGroupList.value = resp.data.data
    }
  } catch (error) {}
}

const bindGroupSubmit = async () => {
  try {
    const res = await userBindGroup({
      user_id: Number(curUserId),
      group_ids: bindGroupId.value,
      action: 'bind'
    })
    if (res.status < 300) {
      addGroupDialogSelect.value = false //关闭绑定窗口
      ElMessage.success('绑定成功')
    }
    fetchListGroup(curUserId, {
      page: pageNumber.value,
      size: pageSize.value,
      name: queryForm.name
    })
  } catch (error) {}
}

const fetchUbindGroup = async (group_id: number) => {
  try {
    const res = await userBindGroup({
      action: 'ubind',
      user_id: Number(curUserId),
      group_ids: [group_id]
    })
    if (res.status < 300) {
      ElMessage.success('退出成功')
    }
    fetchListGroup(curUserId, {
      page: pageNumber.value,
      size: pageSize.value,
      name: queryForm.name
    })
  } catch (error) {}
}

// 定义一个方法来获取用户组列表
const fetchListGroup = async (id: number, query: {}) => {
  try {
    const res = await listUserBindGroup(id, query)
    tableData.value = res.data.data
    page.total = res.data.total
  } catch (error) {
    console.error('Failed to fetch user list:', error)
  }
}

const querySubmit = () => {
  pageNumber.value = 1

  fetchListGroup(curUserId, {
    page: pageNumber.value,
    size: pageSize.value,
    name: queryForm.name
  })
}

// 使用 onMounted 在组件挂载后调用 fetchUserList 方法
onMounted(() => {
  fetchListGroup(curUserId, { page: pageNumber.value, size: pageSize.value })
})

const handleSizeChange = (size: number) => {
  pageSize.value = size
  pageNumber.value = 1 // 重置为第一页
  fetchListGroup(curUserId, {
    page: pageNumber.value,
    size: pageSize.value,
    name: queryForm.name
  })
}

const handleCurrentChange = (page: number) => {
  pageNumber.value = page
  fetchListGroup(curUserId, {
    page: pageNumber.value,
    size: pageSize.value,
    name: queryForm.name
  })
}
</script>
    
    <style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  margin-top: 25px; /* 添加顶部间距 */
}
.demo-form-inline {
  margin-top: 20px;
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-title {
  font-size: 18px;
  font-weight: bold;
}
</style>

    